<template>

  <div class="zhanshi">

    <!-- top -->
    <div class="top">
      <div class="top-left">
        <h1>已连接 <span>{{ this.connectedUserCount }}</span>人</h1>
        <div class="top-body">
          <span
            v-for="item of this.connectedList"
            :key="item"
            class="top-item"
          >{{ item }}</span>
        </div>
      </div>
      <div class="top-right">
        <div class="h1">课堂达标情况</div>
        <h2>有效运动负荷</h2>
        <!-- 进度条-->
        <div class="line-body">
          <div class="line">
            <div class="icon">
              <img src="@/assets/login_images/huo.png" alt="">
            </div>
            <div class="ct">
              <div class="zb" :style="{'left':`${this.currenttime/this.timemarkline}%`}">{{ this.timechu }}%</div>
            </div>
            <!-- <div class="rt">达标偏低</div> -->
          </div>
          <div class="line line2">
            <div class="icon">
              <img src="@/assets/login_images/zhong.png" alt="">
            </div>
            <div class="ct">
              <div class="zb" :style="{'left':`${this.currenttrimp/this.trimpmarkline}%`}"> {{ this.trimpchu }}%</div>
            </div>
            <!-- <div class="rt">达标偏低</div> -->
          </div>
          <p class="rt">{{ this.structure.describe }}</p>
        </div>
        <!-- 进度条-->
        <h2>结构</h2>
		<div class="tag-body">
		  <div class="tag-item" :style="{'background':this.structure.startProgress}">
		    <span>开始部分</span>
		    <div class="tag-icon "
        :class="{'el-icon-success':this.structure.startResult==='standard','el-icon-warning':this.structure.startResult==='high',
        'el-icon-error':this.structure.startResult==='low','el-icon-more':this.structure.startResult==='going'}" />
		  </div>
		  <div class="tag-item " :style="{'background':this.structure.basicProgress}">
		    <span>基础部分</span>
		    <div class="tag-icon " 
        :class="{'el-icon-success':this.structure.basicResult==='standard','el-icon-warning':this.structure.basicResult==='high',
        'el-icon-error':this.structure.basicResult==='low','el-icon-more':this.structure.basicResult==='going'}" />
		  </div>
		  <div class="tag-item " :style="{'background':this.structure.readProgress}">
		    <span>准备部分</span>
		    <div class="tag-icon " 
        :class="{'el-icon-success':this.structure.readResult==='standard','el-icon-warning':this.structure.readResult==='high',
        'el-icon-error':this.structure.readResult==='low','el-icon-more':this.structure.readResult==='going'}"/>
		  </div>
		  <div class="tag-item " :style="{'background':this.structure.endProgress}">
		    <span>结束部分</span>
		    <div class="tag-icon " 
        :class="{'el-icon-success':this.structure.endResult==='standard','el-icon-warning':this.structure.endResult==='high',
        'el-icon-error':this.structure.endResult==='low','el-icon-more':this.structure.endResult==='going'}"/>
		  </div>
		</div>



        <!-- <div class="tag-body">
          <div class="tag-item" :class="{'success':this.structure.start,'warn':!this.structure.start}">
            <span>开始部分</span>
            <div class="tag-icon " :class="{'el-icon-success':this.structure.start,'el-icon-error':!this.structure.start}" />
          </div>
          <div class="tag-item " :class="{'success':this.structure.basic,'warn':!this.structure.basic}">
            <span>基础部分</span>
            <div class="tag-icon " :class="{'el-icon-success':this.structure.basic,'el-icon-error':!this.structure.basic}" />
          </div>
          <div class="tag-item " :class="{'success':this.structure.read,'warn':!this.structure.read}">
            <span>准备部分</span>
            <div class="tag-icon " :class="{'el-icon-success':this.structure.read,'el-icon-error':!this.structure.read}" />
          </div>
          <div class="tag-item " :class="{'success':this.structure.end,'finish':!this.structure.end}">
            <span>结束部分</span>
            <div class="tag-icon " :class="{'el-icon-success':this.structure.end,'el-icon-error':!this.structure.end}" />
          </div>
        </div> -->
      </div>
    </div>

    <div class="center" />
    <!-- bot -->
    <div class="bot">
      <div class="b-left">
        <h1 class="title">未连接 <span>{{ this.notConnectedUserCount }}</span>人</h1>
        <div class="top-body">
          <span
            v-for="item of this.notConnectedList"
            :key="item"
            class="top-item"
          >{{ item }}</span>
        </div>
      </div>
      <div class="b-right">
        <h1 class="title">运动安全预警</h1>
        <div class="b-body">
          <span
            v-for="item of this.warningList"
            :key="item"
            class="name"
          >{{ item }}</span>

        </div>
      </div>
    </div>

  </div>

</template>

<script>
// import BarChart from './BarChart.vue'
import Index from '@/api/index.js'
export default {
  name: 'RiChang',
  components: {
    // BarChart
  },
  props: {
    class_value: [String, Number],
    starttime: [String]
  },
  data() {
    return {
      flag: false,
      timerObj: {}, // 计时器存储器
      timerId: 1, // 模拟计时器id，唯一性
      result: {},
      connectedList: [],
      notConnectedList: [],
      warningList: [],
      notConnectedUserCount: '',
      connectedUserCount: '',
      currenttime: '',
      currenttrimp: '',
      timemarkline: '',
      trimpmarkline: '',
      structure: {},
      timechu:'',
      trimpchu:''
    }
  },
  watch: {
    'flag': function(val) {
      console.log('aaa')
      if (val) {
        // this.first_start()
        // this.start()
        const that = this
        setTimeout(() => {
          that.start()
        }, 1000)
      } else {
        this.stop()
      }
    }
  },
  mounted() {
    // this.start()
  },
  beforeDestroy() {
    this.stop()
  },
  methods: {
    getData() { // 模拟数据
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ data: 666 })
        }, 500)
      })
    },
    async first_start() { // 先触发一次，设备6s才会上传数据 6s后再读取开始循环
      const data = {
        ClassID: this.class_value,
        StartTime: this.starttime
      }
      const result = await Index.DailyMode(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {

      }
    },
    start() {
      const id = this.timerId++
      this.timerObj[id] = true
      const that = this
      async function timerFn() {
        if (!that.timerObj[id]) return
        const data = {
          ClassID: that.class_value,
          StartTime: that.starttime
        }
        const result = await Index.DailyMode(data) // 模拟请求
        console.log(result)
        if (result.code === window.g.SUCCESS_STATE) {
          that.connectedList = result.result.daily.connectedList
          that.notConnectedList = result.result.daily.notConnectedList
          that.warningList = result.result.daily.warningList
          that.connectedUserCount = result.result.daily.connectedUserCount
          that.notConnectedUserCount = result.result.daily.notConnectedUserCount
          that.currenttime = result.result.currenttime
          that.currenttrimp = result.result.currenttrimp
          that.timemarkline = result.result.timemarkline
          that.trimpmarkline = result.result.trimpmarkline
          // 处理百分数
          var time1 = result.result.currenttime / result.result.timemarkline
          var trimp1 = result.result.currenttrimp / result.result.trimpmarkline

          if (isNaN(time1)) {
            that.timechu = 0
          } else if(time1===0){
            that.timechu = 0
          }else {
            console.log(time1)
            that.timechu = (time1 / 100).toFixed(1)
          }
          if (isNaN(trimp1)) {
            that.trimpchu = 0
          } else if(trimp1===0){
            that.trimpchu = 0
          }else {
            that.trimpchu = (trimp1 / 100).toFixed(1)
          }


          that.structure = result.result.structure
        }
        setTimeout(timerFn, 5 * 60 * 1000)
      }
      timerFn()
      console.log(this.timerObj)
    },
    stop() {
      this.timerObj = {}
    }

  }
}
</script>

<style lang="scss" scoped>
.top-body{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .top-item{
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    color: black;
    // padding: 0 20px;
    line-height: 30px;
    height: 32px;
    background: rgba(131, 167, 252, 0.2);
    border: 1px solid #83A7FC;
    margin: 8px;
    // max-width: 91px;
    width: 91px;
  }
}
.tag-body{
  display: flex;
  flex-wrap: wrap;
  .tag-item{
    margin-bottom: 10px;
    margin-right: 18px;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    padding: 0 14px;
    box-sizing: border-box;
    span{
      font-size: 14px;
      float: left;
    }
    .tag-icon{
      font-size: 20px;
      line-height: 32px;
      float: right;
      width: 20px;
      height: 20px;
      // margin-top: 6px ;
    }
    &.success{
      background-color: #d7f4d3;
      span{
        color: #2EA121;
      }
      .tag-icon{
        color:#41CB89 ;
      }
    }
    &.warn{
      background-color: #ffe7cc;
      span{
        color: #ffb362;
      }
      .tag-icon{
        color: #ffb362;
      }
    }
    &.loading{
      background-color: rgba(118, 157, 247, 0.2);
      span{
        color: rgba(36, 75, 164, 1);
      }
      .tag-icon{
        color:rgba(36, 75, 164, 1);
      }
    }
    &.finish{
      background-color: rgba(127, 59, 245, 0.2);
      span{
        color:rgba(88, 32, 186, 1)
      }
      .tag-icon{
        color:rgba(88, 32, 186, 1)
      }
    }
  }
}
@keyframes rotate {
    50% {
        transform: translate(-50%, -73%) rotate(180deg);
    } 100% {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
.line-body{
  .line{
    overflow: hidden;
    margin-bottom: 13px;
    div{
      display: inline-block;
    }
    .icon{
      float: left;
      width: 25px;
      height: 25px;
      // background-color: black;
      img{
        width: 100%;
      }
    }
    .ct{
      margin-left: 10px;
      margin-top: 2.5px;
      float: left;
      max-width: 200px;
      width: 180px;
      height: 20px;
      position: relative;
      background-color: #4a90e2;
      // transform: translate(-50%, -50%);
      overflow: hidden;
      .zb{
        z-index: 9999;
        position: absolute;
        left: 80px;
        line-height: 20px;
        font-size: 12px;
        color: white;
      }
      .zb::before,
      .zb::after{
          content: "";
          position: absolute;
          width: 400px;
          height: 400px;
          top: 0;
          left: 200px;
          background-color: rgba(255, 255, 255, .4);
          border-radius: 45%;
          transform: translate(-50%, -70%) rotate(0);
          animation: rotate 6s linear infinite;
          // z-index: 10;
          z-index: -1;
      }
      .zb::after {
          border-radius: 47%;
          background-color: rgba(255, 255, 255, .9);
          transform: translate(-50%, -70%) rotate(0);
          animation: rotate 10s linear -5s infinite;
          // z-index: 20;
      }
    }
    .rt{
      margin-left: 10px;
      line-height: 25px;
      float: left;
      font-size: 12px;
      color: black;
    }
  }
  .line2{
    .ct{
      background-color: #ffb362;
      .zb{
        left: 30px;
      }
    }

  }
}
.zhanshi{
  // padding: 30rpx;
  .top{
    overflow: hidden;
    padding-left: 25px;
    margin-top: 30px;
    // height: 400px;
    overflow: hidden;
    .top-left{
      margin-top: 20px;
      float: left;
      width: calc(100% - 328px - 20px);
      h1{
        color: #000000;
        font-size: 14px;
        span{
          color: #1890FF;
          font-size: 20px;
        }
      }
      // background-color: blue;
    }
    .top-right{
      margin:20px 0 0 0;
      float: right;
      width: 328px;
      height: 352px;
      background: #FFFFFF;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      padding: 20px;
      box-sizing: border-box;
      .h1{
        font-size: 14px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      h2{
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
    }
  }
  .center{
    height: 24px;
    background: #f0f2f5;
  }
  .bot{
    overflow: hidden;
    background-color: white;
    .b-left{
      float: left;
      width: calc(100% - 328px );

      .title{
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        border-bottom: 1px solid #E9E9E9;
        padding: 20px;
        color: #000000;
        font-size: 14px;
        span{
          color: #F04864;
          font-size: 20px;
        }
      }
      .top-body{
        padding-left: 25px;
        .top-item{
          border: 1px solid #F04864;
          background-color:rgba(240, 72, 100, 0.2);
        }
      }
    }
    .b-right{
      margin:0 0 0 0;
      float: right;
      width: 328px;
      height: 352px;
      background: #FFFFFF;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      box-sizing: border-box;
      .title{
        font-size: 16px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        border-bottom: 1px solid #E9E9E9;
        padding: 20px;
      }
      .b-body{
        display: flex;
        flex-wrap: wrap;
        padding: 10px 20px;
        .name{
          height: 32px;
          line-height: 32px;
          padding: 0 20px;
          margin-right: 30px;
          color: white;
          font-size: 16px;
          background-color: #FF8900;
          margin-bottom: 20px;
        }
      }
    }
  }
}

// }
</style>
